<template>
  <div class="appContainer">
    <div class="headerBox">
      <el-button type="text" icon="el-icon-plus" @click="newLinkHandle">新建连接</el-button>
      <h1>数据库管理平台</h1>
      <i class="el-icon-full-screen" title="全屏"></i>
    </div>
    <div class="containerMain">
      <!--left-->
      <div class="infoListMian">
        <div class="connectionsBox">
          <div class="topBox">
            <h3>CONNECTIONS</h3>
            <div class="flex align-center justify-between">
              <div class="inputBox">
                <el-input v-model="keyword" size="small" placeholder="Search connection or database"></el-input>
              </div>
              <div class="flex align-center">
                <el-button size="small" icon="el-icon-refresh"></el-button>
                <el-button size="small" icon="el-icon-folder-add"></el-button>
              </div>
            </div>
            <div class="databaseBox">
              <el-tree :data="databaseData" @node-contextmenu="handleContextMenu" :default-expanded-keys="[1]" node-key="id" :props="defaultProps" @node-click="databaseHandleNodeClick">
                <template #default="{ node, data }">
                  <div class="custom-tree-node flex align-center">
                    <img v-if="node.level === 1" class="node-img" :src="iconObj[data.icon]" />
                    <img v-if="node.level === 2" class="node-img" :src="databaseIcon" />
                    <span>{{ node.label }}</span>
                    <i v-if="node.level === 1" class="el-icon-success" :style="{color: data.status === 1 ? 'green' : 'gray'}"></i>
                    <span>{{ data.type }}</span>
                  </div>
                </template>
              </el-tree>
            </div>
          </div>
          <div class="subBox" v-if="isTable">
            <h3>TABLES, VIEWS, FUNCTIONS</h3>
            <div class="flex align-center justify-between">
              <div class="inputBox">
                <el-input v-model="keyword" size="small" placeholder="Search in tables, views, procedures"></el-input>
              </div>
              <div class="flex align-center">
                <el-button size="small" icon="el-icon-plus" @click="newTableHandle"></el-button>
                <el-button size="small" icon="el-icon-refresh"></el-button>
                <el-button size="small" icon="el-icon-folder-add"></el-button>
              </div>
            </div>
            <div class="tableBox">
              <el-tree :data="tableData" :props="defaultProps" @node-click="handleNodeClick">
                <template #default="{ node, data }">
                  <div class="custom-tree-node flex align-center">
                    <img v-if="node.level === 1" class="node-img" :src="tableIcon" />
                    <img v-if="node.level === 2" class="node-img" :src="fieldsIcon" />
                    <span>{{ node.label }}</span>
                    <span v-if="node.level === 1">{{ data.comment }}, {{ data.info }}</span>
                    <span v-if="node.level === 2">{{data.type}}, {{data.comment}}</span>
                  </div>
                </template>
              </el-tree>
            </div>
          </div>
          <div class="subBox" v-else>
            <h3>DATABASE CONTENT</h3>
            <div class="databaseInfo">
              <p>Current connection:</p>
              <h4>192.168.1.139</h4>
              <el-button plain size="small" @click="isTable = true;">Show 192.168.1.139</el-button>
              <el-button type="text" icon="el-icon-warning">Database not selected</el-button>
            </div>
          </div>
        </div>
      </div>
      <!--right-->
      <div class="contentMain">
        <div class="contentBox">
          <Tabs/>
          <div class="contentPage">
            <transition name="fade-transform" mode="out-in">
              <router-view class="mainView" />
            </transition>
            <div class="newLinkBox flex align-center justify-center" v-if="tagsList.length === 0">
              <div>
                <img :src="newIcon" alt="">
                <el-button type="primary" icon="el-icon-plus" @click="newLinkHandle">新建连接</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="infoMain">
      <Info/>
    </div>
    <!--连接的鼠标右键菜单 Start-->
    <ul class="context-menu" ref="contextMenu">
      <li class="flex align-center"><i class="el-icon-refresh-left"></i>重新连接</li>
      <li class="flex align-center"><i class="el-icon-circle-close"></i>断开连接</li>
      <li class="flex align-center" @click="userHandle"><i class="el-icon-user"></i>用户管理</li>
    </ul>
    <!--连接的鼠标右键菜单 End-->
  </div>
</template>
<script>
import Tabs from '@/components/common/Tabs';
import Info from '@/components/common/Info';
import {mapGetters} from "vuex";
export default {
  name: 'index',
  components: {
    Tabs,
    Info
  },
  data(){
    return {
      newIcon: './static/img/newIcon.png',
      keyword: '',
      isTable: false,
      iconObj: {
        mysql: './static/img/mysql.png',
        oracle: './static/img/oracle.png',
        dm: './static/img/dm.png',
        rdjc: './static/img/rdjc.png',
        mongoDB: './static/img/mongoDB.png'
      },
      databaseIcon: './static/img/database.png',
      databaseData: [{
        id: 1,
        icon: 'mysql',
        label: '192.168.1.139',
        type: 'mysql',
        status: 1,
        children: [{
          label: 'TechStream',
        }, {
          label: 'FutureDB'
        }, {
          label: 'QuantumStore'
        }, {
          label: 'NeuralBase'
        }, {
          label: 'HyperCore'
        }]
      }, {
        id: 2,
        icon: 'oracle',
        label: '192.168.1.139',
        type: 'oracle',
        children: [{
          label: 'EduArchive',
        }, {
          label: 'LearnDB',
        }, {
          label: 'AcademiaCore'
        }, {
          label: 'KnowledgeTree'
        }, {
          label: 'StudySphere'
        }]
      }, {
        id: 3,
        icon: 'dm',
        label: '192.168.1.139',
        type: '达梦',
        children: [{
          label: 'BizFlowDB',
        }, {
          label: 'TradeHub',
        }, {
          label: 'CommerceGrid'
        }, {
          label: 'EnterpriseCore'
        }, {
          label: 'MarketPulse'
        }]
      }, {
        id: 4,
        icon: 'rdjc',
        label: '192.168.1.139',
        type: '人大进仓',
        children: [{
          label: 'DataVault',
        }, {
          label: 'InfoSphere',
        }, {
          label: 'DataCore'
        }, {
          label: 'PrimeDB'
        }, {
          label: 'MasterRecords'
        }]
      }],
      tableIcon: './static/img/tableIcon.png',
      fieldsIcon: './static/img/fieldsIcon.png',
      tableData: [{
        label: 'sys_user',
        comment: '用户信息表',
        info: '2 row',
        children: [{
          type: 'bigint',
          comment: '用户ID',
          label: 'user_id',
        }, {
          type: 'varchar',
          comment: '用户名',
          label: 'user_name',
        }, {
          type: 'varchar',
          comment: '用户昵称',
          label: 'nick_name',
        }, {
          type: 'varchar',
          comment: '用户类型（00系统用户）',
          label: 'user_type',
        }, {
          type: 'varchar',
          comment: '用户邮箱',
          label: 'email',
        },
          {
            type: 'varchar',
            comment: '手机号码',
            label: 'phonenumber',
          }, {
            type: 'varchar',
            comment: '用户性别（0男 1女 2未知）',
            label: 'sex',
          }, {
            type: 'varchar',
            comment: '帐号状态（0正常 1停用）',
            label: 'status',
          }, {
            type: 'varchar',
            comment: '最后登录IP',
           label: 'login_ip',
          }
        ]
      }, {
        label: 'sys_role_menu',
        comment: '角色和菜单关联表',
        info: '6 row',
        children: [{
          type: 'varchar',
          comment: '角色ID',
          label: 'role_id',
        }, {
          type: 'varchar',
          comment: '菜单ID',
          label: 'menu_id',
        }, {
          type: 'varchar',
          comment: '角色ID',
          label: 'role_id',
        }, {
          type: 'varchar',
          comment: '菜单ID',
          label: 'menu_id',
        }]
      }, {
        label: 'sys_user_role',
        comment: '用户和角色关联表',
        info: '6 row',
        children: [{
          type: 'varchar',
          comment: '用户ID',
          label: 'user_id',
        }, {
          type: 'varchar',
          comment: '角色ID',
          label: 'role_id',
        }, {
          type: 'varchar',
          comment: '用户ID',
          label: 'user_id',
        }, {
          type: 'varchar',
          comment: '角色ID',
          label: 'role_id',
        }]
      }, {
        label: 'sys_role_dept',
        comment: '角色和部门关联表',
        info: '6 row',
        children: [{
          type: 'varchar',
          comment: '角色ID',
          label: 'role_id',
        }, {
          type: 'varchar',
          comment: '部门ID',
          label: 'dept_id',
        }, {
          type: 'varchar',
          comment: '角色ID',
          label: 'role_id',
        }, {
          type: 'varchar',
          comment: '部门ID',
          label: 'dept_id',
        }]
      },{
        label: 'sys_dict_type',
        comment: '字典类型表',
        info: '6 row',
        children: [{
          type: 'varchar',
          comment: '字典主键',
          label: 'dict_id',
        }, {
          type: 'varchar',
          comment: '字典名称',
          label: 'dict_name',
        }, {
          type: 'varchar',
          comment: '字典类型',
          label: 'dict_type',
        }, {
          type: 'varchar',
          comment: '状态（0正常 1停用）',
        }
        ]
      }, {
        label: 'sys_dict_data',
        comment: '字典数据表',
        info: '6 row',
        children: [{
          type: 'varchar',
          comment: '字典主键',
          label: 'dict_id',
        }, {
          type: 'varchar',
          comment: '字典名称',
          label: 'dict_name',
        }, {
          type: 'varchar',
          comment: '字典类型',
          label: 'dict_type',
        }, {
          type: 'varchar',
          comment: '状态（0正常 1停用）',
        }
        ]
      }, {
        label: 'sys_config',
        comment: '参数配置表',
        info: '6 row',
        children: [{
          type: 'varchar',
          comment: '参数主键',
          label: 'config_id',
        }, {
          type: 'varchar',
          comment: '参数名称',
          label: 'config_name',
        }, {
          type: 'varchar',
          comment: '参数键名',
          label: 'config_key',
        }, {
          type: 'varchar',
          comment: '参数键值',
          label: 'config_value',
        }]
      },
      {
       label: 'sys_dept',
       comment: '部门表',
       info: '6 row',
        children: [{
          type: 'varchar',
          comment: '部门ID',
          label: 'dept_id',
        }, {
          type: 'varchar',
          comment: '部门名称',
          label: 'dept_name',
        }, {
          type: 'varchar',
          comment: '显示顺序',
          label: 'order_num',
        }, {
          type: 'varchar',
          comment: '父部门ID',
          label:'parent_id',
        }]
      },{
        label: 'sys_post',
          comment: '岗位信息表',
          info: '6 row',
          children: [{
            type: 'varchar',
            comment: '岗位ID',
            label: 'post_id',
          }, {
            type: 'varchar',
            comment: '岗位编码',
            label: 'post_code',
          }, {
            type: 'varchar',
            comment: '岗位名称',
            label: 'post_name',
          }, {
            type: 'varchar',
            comment: '显示顺序',
            label: 'post_sort',
         }
          ]
        }, {
        label: 'sys_menu',
          comment: '菜单信息表',
          info: '6 row',
          children: [{
            type: 'varchar',
            comment: '菜单ID',
            label: 'menu_id',
          }, {
            type: 'varchar',
            comment: '菜单名称',
            label: 'menu_name',
          }, {
            type: 'varchar',
            comment: '父菜单ID',
            label: 'parent_id',
          }, {
            type: 'varchar',
            comment: '显示顺序',
            label: 'order_num',
         }
          ]
        }, {
        label: 'sys_oper_log',
          comment: '操作日志记录',
          info: '6 row',
          children: [{
            type: 'varchar',
            comment: '日志主键',
            label: 'info_id',
          }, {
            type: 'varchar',
            comment: '模块标题',
            label: 'title',
          }, {
            type: 'varchar',
            comment: '操作类型',
            label: 'business_type',
          }, {
            type: 'varchar',
            comment: '请求方式',
            label: 'request_method',
          }
          ]
        }, {
        label: 'sys_logininfor',
          comment: '系统访问记录',
          info: '6 row',
          children: [{
            type: 'varchar',
            comment: '访问ID',
            label: 'info_id',
          }, {
            type: 'varchar',
            comment: '用户名称',
            label: 'user_name',
          }, {
            type: 'varchar',
            comment: '登录地址',
            label: 'ipaddr',
          }, {
            type: 'varchar',
            comment: '登录地点',
            label: 'login_location',
          }, {
            type: 'varchar',
          }]
        }, {
        label: 'sys_job',
          comment: '定时任务调度表',
          info: '6 row',
          children: [{
            type: 'varchar',
            comment: '任务名称',
            label: 'job_name',
          }, {
            type: 'varchar',
            comment: '任务组名',
            label: 'job_group',
          }, {
            type: 'varchar',
            comment: '调用目标字符串',
            label: 'invoke_target',
          }, {
            type: 'varchar',
            comment: '日志信息',
            label: 'job_message',
          }]
        }, {
        label: 'sys_job_log',
          comment: '定时任务调度日志表',
          info: '6 row',
          children: [{
            type: 'varchar',
            comment: '任务名称',
            label: 'job_name',
          }, {
            type: 'varchar',
            comment: '任务组名',
            label: 'job_group',
          }, {
            type: 'varchar',
            comment: '调用目标字符串',
            label: 'invoke_target',
          }, {
            type: 'varchar',
            comment: '日志信息',
            label: 'job_message',
          }]
        },{
        label: 'sys_notice',
          comment: '通知公告表',
          info: '6 row',
          children: [{
            type: 'varchar',
            comment: '公告标题',
            label: 'notice_title',
          }, {
            type: 'varchar',
            comment: '公告类型（1通知 2公告）',
            label: 'notice_type',
          }, {
            type: 'varchar',
            comment: '公告内容',
            label: 'notice_content',
          }, {
            type: 'varchar',
            comment: '状态（0正常 1关闭）',
          }
          ]
        },{
        label: 'sys_dict_type',
          comment: '字典类型表',
          info: '6 row',
          children: [{
            type: 'varchar',
            comment: '字典名称',
            label: 'dict_name',
          }, {
            type: 'varchar',
            comment: '字典类型',
            label: 'dict_type',
          }, {
            type: 'varchar',
            comment: '状态（0正常 1停用）',
            label: 'status',
          }, {
            type: 'varchar',
            comment: '备注',
            label: 'remark',
          }
          ]
        }
        ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      currentNode: null, // 当前右键点击的节点
      currentDatabase: ''
    }
  },
  computed: {
    ...mapGetters(['tagsList'])
  },
  mounted() {
    document.addEventListener('click', () => {
      this.$refs.contextMenu.style.display = 'none';
    });
  },
  methods: {
    handleContextMenu(event, data, node) {
      // 判断是否是一级节点
      if (!node.level || node.level !== 1) {
        return; // 仅支持一级节点
      }

      event.preventDefault();

      this.currentNode = data; // 保存当前节点数据
      // 显示右键菜单并设置位置
      const contextMenu = this.$refs.contextMenu;
      contextMenu.style.top = `${event.clientY}px`;
      contextMenu.style.left = `${event.clientX}px`;
      contextMenu.style.display = 'block';
    },
    databaseHandleNodeClick(data, node) {
      this.tableData = this.shuffleArray(this.tableData);
      if(data.icon) {
        this.isTable = false
      } else {
        this.isTable = true;
      }
      if(node.level === 2) {
        this.currentDatabase = data.label;
        this.$store.commit('SET_CURRENTDATABASE', data.label);
        if(this.tagsList && this.tagsList.length > 0) {
          this.$store.commit('DEL_TAGSLIST', this.tagsList.length - 1);
        }
        this.newLinkHandle();
      }
    },
    shuffleArray(array) {
      const shuffled = array.slice(); // 创建原数组的副本，避免修改原数组
      for (let i = shuffled.length - 1; i > 0; i--) {
        const randomIndex = Math.floor(Math.random() * (i + 1)); // 随机索引
        // 交换元素
        [shuffled[i], shuffled[randomIndex]] = [shuffled[randomIndex], shuffled[i]];
      }
      return shuffled;
    },
    handleNodeClick(data, node) {
      if(node.level === 1) {
        this.$store.commit('ADD_TAGSLIST', {
          name: 'newTable',
          path: '/newTable',
          meta: {
            title: `${data.label}-编辑表`
          }
        })
        this.$store.commit('SET_CURRENTACTIVE', '/newTable');
        this.$router.push('/index/newTable')
      } else if(node.level === 2) {
        this.$store.commit('ADD_TAGSLIST', {
          name: 'editTable',
          path: '/editTable',
          meta: {
            title: `${data.label}-表数据`
          }
        })
        this.$store.commit('SET_CURRENTACTIVE', '/editTable');
        this.$router.push('/index/editTable')
      }
    },
    newLinkHandle(){
      this.$store.commit('ADD_TAGSLIST', {
        name: 'newLink',
        path: '/newLink',
        meta: {
          title: '新建连接'
        }
      })
      this.$store.commit('SET_CURRENTACTIVE', '/newLink');
      this.$router.push('/index/newLink')
    },
    newTableHandle(){
      this.$store.commit('ADD_TAGSLIST', {
        name: 'newTable',
        path: '/newTable',
        meta: {
          title: `${this.currentDatabase}-新建表`
        }
      })
      this.$store.commit('SET_CURRENTACTIVE', '/newTable');
      this.$router.push('/index/newTable')
    },
    userHandle(){
      this.$store.commit('ADD_TAGSLIST', {
        name: 'userManage',
        path: '/userManage',
        meta: {
          title: '用户管理'
        }
      })
      this.$store.commit('SET_CURRENTACTIVE', '/userManage');
      this.$router.push('/index/userManage')
    }
  }
}
</script>
<style lang="scss" scoped>
::-webkit-scrollbar-track-piece {
  background-color: transparent;
}
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background-color: transparent;
}
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: hsla(220, 4%, 58%, .3);
}
.appContainer{
  height: 100%;
}
.headerBox{
  height: 30px;
  position: relative;
  background: #f1f1f1;
  text-align: center;
  line-height: 30px;
  ::v-deep .el-button{
    position: absolute;
    left: 10px;
    top: 0;
    padding: 0;
    height: 30px;
    border: none;
  }
  h1{
    font-size: 16px;
    color: #333;
    margin: 0;
  }
  i{
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;
    right: 0;
    top: 0;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
  }
}
.containerMain{
  height: calc(100% - 50px);
  overflow: hidden;
  position: relative;
  .infoListMian{
    width: 350px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    border-right: 2px solid #f1f1f1;
    box-sizing: border-box;
    .connectionsBox{
      height: 100%;
      .topBox{
        height: 50%;
        border-bottom: 2px solid #f1f1f1;
        box-sizing: border-box;
      }
      .subBox{
        height: 50%;
      }
      h3{
        line-height: 30px;
        margin: 0;
        padding: 0 10px;
        border-bottom: 1px solid #f1f1f1;
        font-size: 16px;
      }
      ::v-deep .el-button{
        padding: 9px;
        border-radius: 0;
        margin: 0 !important;
      }
      .inputBox{
        width: calc(100% - 64px);
        ::v-deep .el-input__inner{
          border-radius: 0 !important;
          padding: 0 10px;
        }
      }
    }
  }
  .contentMain{
    padding-left: 350px;
    height: 100%;
    .contentBox{
      padding: 10px;
      height: 100%;
      box-sizing: border-box;
      ::v-deep .el-tabs__header{
        margin-bottom: 10px;
      }
    }
    .contentPage{
      height: calc(100% - 51px);
      overflow-x: hidden;
    }
  }
}
.infoMain{
  height: 20px;
  background: #409EFF;
  padding: 0 10px;
}
.databaseBox, .tableBox {
  height: calc(100% - 73px);
  margin-top: 5px;
  overflow-x: hidden;
  padding: 0 5px;
}
.databaseInfo{
  height: calc(100% - 41px);
  margin-top: 5px;
  overflow-x: hidden;
  padding: 0 10px;
  p{
    margin-top: 10px;
  }
  h4{
    margin: 8px 0 15px;
  }
  ::v-deep .el-button{
    display: block;
    width: 100%;
  }
}
.custom-tree-node{
 .node-img{
   width: 24px;
   height: 24px;
 }
  span{
    display: block;
    margin: 0 10px;
    &:last-of-type{
      font-size: 12px;
      color: #888888;
      position: relative;
      top: 1px;
    }
  }
}
/* fade */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.28s;
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
}

/* fade-transform */
.fade-transform--move,
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all .5s;
}

.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
.newLinkBox{
  height: 100%;
   div{
     img{
       width: 100px;
       height: 100px;
       display: block;
       margin: 0 auto;
     }
     ::v-deep .el-button{
       margin-top: 30px;
     }
   }
}
.context-menu {
  position: fixed;
  display: none;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 8px;
  z-index: 1000;
  list-style: none;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.context-menu li {
  padding: 10px 15px 10px 10px;
  cursor: pointer;
  color: #fff;
  font-size: 14px;
  i{
    margin-right: 10px;
  }
}

.context-menu li:hover {
  background-color: #0078d7;
  color: #fff;
  cursor: pointer;
}
::v-deep .el-tree{
  .el-tree-node.is-current{
    background-color: #f1f1f1;
  }
}
</style>
